<template>
  <div class="pagination-container" v-show="totalCount > pageSize">
    <el-pagination
      background
      align="center"
      :layout="layout"
      :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
      :current-page="page"
      :page-size="pageSize"
      :total="totalCount"
      :disabled="disabled"
      @size-change="sizeChange"
      @current-change="currentChange"
      :prev-text="$t('pagination.prev')"
      :next-text="$t('pagination.next')"/>
  </div>
</template>
<script>
export default {
  props: {
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    page: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    totalCount: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    sizeChange: {
      type: Function,
      default: () => {},
    },
    currentChange: {
      type: Function,
    },
  },
};
</script>
<style lang="scss">
.pagination-container{
  margin-top: 20px;
  .el-pagination{
    .el-select{
      .el-input{
        .el-input__inner{
          vertical-align: top;
          height: 28px !important;
        }
      }
    }
    .btn-prev, .btn-next{
      margin: 0;
      padding: 0 10px;
      background-color: transparent;
      border-radius: 0;
      border: 1px solid #d5d9db;
      box-sizing: content-box;
      transform: translateY(-1px);
    }
    .el-pager{
      border-top: 1px solid #d5d9db;
      border-bottom: 1px solid #d5d9db;
      transform: translateY(-1px);
      li{
        background-color: transparent;
        margin: 0;
        border-radius: 0;
        border-right: 1px solid #d5d9db;
        font-weight: normal;
        &:last-of-type{
          border-right: none;
        }
      }
    }
  }
}
</style>
